/* EDIT */


/* --------------------------------------------------------- top bar */

#edittopbar {
    background-color: var(--secondary-background-color);
}

#edittopbar a {
    color: var(--text-color);
}
.fontsize, .highlighttheme {
    display: flex;
    gap: var(--spacing);
    align-items: center;
}

/* --------------------------------------------------------- side bar collapsible panels */

/* overwrites global behavior */
#leftbar :checked ~ .toggle-panel {
    width: 280px;
    max-width: none;
}
/* overwrites global behavior */
#leftbar .toggle-panel-content {
    padding: 0;
    background-color: var(--tertiary-background-color);
}
/* overwrites global behavior */
#leftbar .toggle-panel-content summary {
    list-style: none;
    background-color: var(--secondary-background-color);
    font-size: 1em;
    padding: var(--spacing);
    color: var(--text-color);
}

/* open / closed metadata informations */
aside details summary::before { content: "+ " }
aside details[open] summary::before { content: "- " }



/* --------------------------------------------------------- left bar fieldsets */

fieldset {
    display: flex;
    flex-direction: column;
    gap: var(--spacing);
    padding: var(--spacing);
    border: none;
    margin: 0;
}
input[type="text"],input[type="number"],input[type="time"], textarea {
    width: 100%;
}
textarea {
    resize: vertical;
}


/* --------------------------------------------------------- left bar geomap */

div#geomap {
    width: 100%;
    height: 250px;
}

/* --------------------------------------------------------- tabs */

.tabs {
    flex: 2;
    position: relative;
    height: 100%;
    background: var(--main-color);
    display: flex;
    overflow: hidden;
    gap: var(--half-spacing);
}

.tabs .tab .content {
	position: absolute;
	left: 0px;
	width: 100%;
	height: calc(100% - 30px);
	visibility: hidden;
}

.checkboxtab {
	display: none;
}

/* align first tab with CodeMirror line numbering column */
.js .tab:first-child {
    margin-left: 1.75em;
}

.tab label {
	display: inline-block;
    position: relative;
    padding: var(--half-spacing) var(--spacing) calc(var(--spacing) + var(--half-spacing));
    top: 4px;
    left: 4px;
    vertical-align: top;
    color: var(--text2-color);
    white-space: nowrap;
}

/* if the tab contains anything */
.tab label.edited {
    text-decoration: underline;
    text-decoration-style: dashed;
    text-decoration-color: color-mix(in srgb, var(--text2-color) 70%, var(--main-color) 30%);
    text-underline-offset: .15em;
}

/* @todo: report an issue: $templates[$key] never returns anything */
.tab label.template {
    color: var(--text2-color);
}

.checkboxtab:checked ~ label {
    background: var(--input-background-color);
    color: var(--input-color);
    border-radius: var(--radius) var(--radius) 0 0;
}
.checkboxtab:checked ~ label.edited {
    text-decoration-color: color-mix(in srgb, var(--input-color) 70%, var(--input-background-color) 30%);
}

.checkboxtab:checked ~.content {
	visibility: visible;
}

.tabs textarea {
	height: 100%;
	width: 100%;
	border: none;
	resize: none;
	padding: var(--spacing);
    border-radius: 0;
}

/* --------------------------------------------------------- tabs */

#external label {
    width: 150px;
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --------------------------------------------------------- help */

#help kbd {
    border: 1px solid #000000c7;
    padding: 1px 4px;
    background-color: var(--main-color);
    color: var(--text2-color);
    box-shadow: 3px 2px #000000c7;
    border-radius: 4px;
}

#help {
    line-height: 1.4;
    min-width: 250px;
}

#help code {
    background-color: var(--code-background-color);
    color: var(--code-color);
    padding: 2px;
    margin-right: 5px;
    white-space: pre;
}

#help code i {
    color: var(--text2-color);
    opacity: .7;
}

#help h4:not(:first-of-type){
    margin-top: 1.5em;
}
#help p,
#help li {
    margin: .5em 0;
    margin-bottom: 8px;
}


/* --------------------------------------------------------- thumbnail */

div#showthumbnail img {
    width: 100%;
    height: 100%;
    max-height: 150px;
    object-fit: scale-down;
    padding: 2%;
}


/* --------------------------------------------------------- Custom CodeMirror CSS */

.CodeMirror {
    height: 100% !important;
    cursor: text;
}

/* CodeMirror Wcms mode */
.cm-wcms, .cm-wkeyword {
    color: var(--outline-color);
    background-color: var(--outline-background-color);
}

span.cm-wkeyword {
    text-decoration: underline;
}

.cm-wikilink {
    color: rgb(98, 81, 248);
    font-weight: bold;
}

/* To make markdown heading bigger
.cm-header-1 { font-size: 150%; }
.cm-header-2 { font-size: 130%; }
.cm-header-3 { font-size: 120%; }
.cm-header-4 { font-size: 110%; }
*/

.CodeMirror-selected  {
	background-color: var(--main-color) !important;
}
.CodeMirror-selectedtext {
	color: var(--text-color) !important;
}


/* --------------------------------------------------------- Tagify field */

.tagify {
    --tag-pad: 0 0;
    --tag-text-color: inherit;
    --tag-border-radius: 10px;
    --tag-inset-shadow-size: 0;
    --loader-size: 0;
    --tags-focus-border-color: transparent;
    background: var(--input-background-color);
    border:none;
    border-radius: var(--radius);
    width: 100%;
    font-size: var(--size-small);
    display: flex;
    flex-direction: row;
    padding: var(--half-padding);
    gap: var(--half-padding);
    flex-wrap: wrap;
}

:root {
	--tagify-dd-color-primary: var(--outline-background-color);
	--tagify-dd-item-pad: 5px;
	--tagify-dd-bg-color:  var(--input-background-color);
}

.tagify__tag {
    border-radius: var(--radius);
    animation: none;
    margin: 0;
    padding: var(--half-spacing) var(--spacing);
    gap: var(--half-spacing);
    background: #eee;
}

.tagify__tag__removeBtn {
    color: inherit;
    margin: 0;
}

.tagify__dropdown span.tag {
    /* border-radius: 10px;
	padding: 1px 4px; */
}

.tagify--focus {
    outline: ridge 2px var(--outline-background-color)
}


/* --------------------------------------------------------- Media queries */

@media (max-width: 550px) {
    main {
      flex-direction: column;
      overflow-y: scroll;
    }

    #leftbar :checked ~ .toggle-panel,
    :checked ~ .toggle-panel {
        /* full width panels */
        width: 100%;
        max-width: none;
    }

    /* reorder panels */
    #leftvar { order: 1 }
    #rightbar { order: 2; }
    .tabs { order: 3 }
    
    /* no js / codemirror ? reset first tab spacing */
    .js .tab:first-child {
        margin-left: var(--half-spacing);
    }

    /* hide page name within save button */
    .pageid, 
    /* hide editor font-size input + label */
    .fontsize {
        display: none;
    }
}
